<template>
	<div class="homebox">
		<Tabbar :leftArrow='true' :title="$t('textTrans.利润表')" :hidden='false'></Tabbar>
		<div class="boxrr">
			<van-popup v-model="showpouop" position="top" :style="{ height: '70%' }">
				<div style="text-align: center; font-size: 15px"> {{$t('textTrans.开始时间')}}</div>
				<van-datetime-picker :show-toolbar="false" v-model="currentDate" style="height: 140px; overflow: hidden"
					type="date" :min-date="minDate" :max-date="maxDate" />
				<div style="
            text-align: center;
            font-size: 15px;
            background: white;
            padding: 20px 0;
          ">
					{{$t('textTrans.结束时间')}}
				</div>
				<van-datetime-picker v-model="endDate" :show-toolbar="false" style="height: 140px; overflow: hidden"
					type="date" :min-date="minDate" :max-date="maxDate" />
				<van-button @click="search" class="regBtn" color="#00A170" style="margin:30px auto">
					{{$t('textTrans.搜索')}} </van-button>

			</van-popup>
			<div style="margin: 20px auto;width: 88%;background: #B5F3EA;padding: 15px;border-radius: 10px;">
				<!-- <van-search v-model="value" shape="round" background="#F7F7F7" placeholder="请输入搜索关键词" /> -->

				<div
					style="font-size: 13px;margin-bottom: 4PX; padding:  0px 0px 10px 0px;display: flex;align-items: center;justify-content: space-between;color: #333">
					<van-button style="padding: 14px 8px;width: 40%;border-radius: 5px;" @click='showpouop = true'
						type="primary" color="#fff" size="mini">
						<span style="color: #333;">
							{{start?start:$t('textTrans.开始时间')}}
						</span>
					</van-button>
					-
					<van-button style="padding: 14px 8px;width:  40%;border-radius: 5px;" @click='showpouop = true'
						type="primary" size="mini" color="#fff">
						<span style="color: #333;">
							{{end?end:$t('textTrans.结束时间')}}
						</span>
					</van-button>
				</div>
                <div style="display: flex;justify-content: space-between;padding: 10px;background: white;font-size: 14px;">
					<div>
							{{$t('textTrans.日期')}}
					</div>
					<div>
							{{$t('textTrans.数量')}}
					</div>
				</div>
				<div v-for="(item, index) in data" :key="index">
					<div style=" background: white;padding: 15px 10px;color: white;font-size: 13px;">
						<div
							style="font-size: 13px;color: #333;display: flex;justify-content: space-between;border-bottom: 1px solid #F7F7F7;padding-bottom: 4px;align-items: center;">
							<div>
								<!-- <div> {{item.bill_type}}</div> -->
								<div style="margin-top: 8px;color: gray;">{{ item.create_time }}</div>
							</div>
							<div style="text-align: right;">
								<!-- <div style="">{{item.currency_name}}</div> -->
								<div style="margin-top: 8px;color: #00A170">
								    {{ item.type==1?'+':'-' }}
									{{ item.account }} TRX
								</div>
							</div>
						</div>
					</div>
				</div>
				<van-empty v-if="data.length==0" description="" />
				<div
					style="font-size: 14px;background: white ;padding: 15px 8px;display: flex;justify-content: space-between;align-items: center;">
					<div style="display: flex;align-items: center;">
						<div style="margin-right: 8px;">
							{{$t('textTrans.每页行数')}}
						</div>
						<van-button @click='PageShow = true' type="primary" color="#F5F5F5" size="mini">
							<span style="color: #00A170;">{{pagesize}}</span>
						</van-button>
					</div>
					<div>
						<van-button @click='prepage' class="butcolr" type="primary" color="#F5F5F5" size="mini">
							{{$t('textTrans.上一个')}}
						</van-button>
						<van-button @click='nextpage' class="butcolr" type="primary" size="mini" color="#F5F5F5">
							{{$t('textTrans.下一个')}}
						</van-button>
					</div>
				</div>
			</div>

			<van-action-sheet v-model="typeShow" :actions="typeactions" :cancel-text="$t('textTrans.取消')"
				close-on-click-action @select="getLang" @cancel="PageShow = false" />
			<van-action-sheet v-model="PageShow" :actions="actions" :cancel-text="$t('textTrans.取消')"
				close-on-click-action @select="getLang" @cancel="PageShow = false" />
			<!-- <div
        v-if="list.length == 0"
        style="color: #333; text-align: center; font-size: 15px; margin: 20px 0"
      >
        没有更多了
      </div> -->
		</div>
	</div>
</template>

<script>
	import {
		projectRate,
		projectreceive,
		billList,
		basicRecord
	} from "@/api/home";
	export default {
		data() {
			return {
				typeactions: [{
					name: this.$i18n.t('基本账户')
				}],
				actions: [{
					name: '10'
				}, {
					name: '20'
				}, {
					name: '30'
				}, {
					name: '50'
				}],
				page: 1,
				typeShow: false,
				PageShow: false,
				pagesize: 10,
				count:0,
				active: 0,
				draw_id: "",
				list: [],
				awardData: [],

				money: "",
				address: "",
				cuname: "",
				showpouop: false,

				currentDate: new Date(2021, 0, 17),
				endDate: new Date(2021, 0, 17),
				minDate: new Date(2020, 0, 1),
				maxDate: new Date(2025, 10, 1),
				start: "",
				end: "",
				cardinal_number: "",
				data: {},
				pay_password: "",
			};
		},
		created() {
			// this.draw_id = 0;
			this.getData();
			// this.getawardList();
		},
		methods: {
			prepage() {
				if (this.page == 1) {
					return false
				} else {
					this.page = this.page - 1
				}
				this.getData();
			},
			nextpage() {
				
				if(this.page*this.pagesize < this.count){
					this.page = this.page + 1
					this.getData();
				}else{
					return false
				}
			},
			getData() {
				billList({
					page: this.page,
					pagesize: this.pagesize,
					start_time: this.start,
					end_time: this.end,
				}).then(res => {
					this.data = res.data
				})
			},
			getRecev(id) {
				projectreceive({
					id
				}).then(res => {
					this.getData()
				})
			},
			getLang(e) {
				this.pagesize = e.name
				this.getData()
			},
			formatDateTime(date) {
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				m = m < 10 ? "0" + m : m;
				var d = date.getDate();
				d = d < 10 ? "0" + d : d;
				var h = date.getHours();
				var minute = date.getMinutes();
				minute = minute < 10 ? "0" + minute : minute;
				return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + "00";
			},
			search() {
				this.start = this.formatDateTime(this.currentDate);
				this.end = this.formatDateTime(this.endDate);
				this.getData();
				this.showpouop = false;

			},
			onclick(e) {
				this.draw_id = this.awardData[e].id;
				this.getData();
			},
			getawardList() {
				awardList().then((res) => {
					this.awardData = res;
					this.awardData.unshift({
						id: "",
						name: "全部"
					});
					this.active = Number(res[0].id - 1);
				});
			},
			getlist() {
				awardRecordList({
					award_id: this.draw_id,
					start_time: this.start,
					end_time: this.end,
				}).then((res) => {
					this.list = res;
					this.count = res.count
				});
			},
			goRight() {
				// this.$router.push({
				//   path: "withdrawRecord",
				// });
				this.showpouop = true;
			},
			getrate() {
				this.rate = (this.noticeList[0].rate / 100) * this.money;
			},
			getid(item) {
				this.draw_id = item.id;
				this.getlist();
			},
			onClickLeft() {
				this.$router.go(-1);
			},
		},
	};
</script>

<style scoped lang="less">
	/deep/.van-search {
		padding: 10px 0;
	}

	/deep/.van-search__content {
		background: white !important;
	}

	// /deep/.van-icon {
	// 	color: #000000;
	// }

	.regBtn {
		display: block;
		width: 317.5px;
		display: block;
		height: 44px;
		font-weight: bold;

		background: #326964;
		font-size: 16px;
		font-weight: bold;
		border: none;
		margin: 0 auto;
		border-radius: 5px;
		color: #fff;
		font-weight: bold;
	}

	.boxrr {
		width: 100%;
	}

	.butcolr {
		/deep/.van-button__text {
			color: #333;
		}
	}

	/deep/.van-button__text {
		color: #fff;
	}

	/deep/.van-cell {
		background: transparent;
		color: white;
	}

	/deep/.van-field__control {
		color: white;
	}

	.homebox {
		width: 100%;
		height: 100%;
	}

	// .van-nav-bar {
	// 	background: #326964;

	// 	/deep/.van-nav-bar__title {
	// 		color: #ffffff;
	// 	}

	// 	/deep/ .van-icon {
	// 		color: #ffffff;
	// 	}
	// }

	.noticeWrap {
		padding: 0 0px;
		margin-top: 11px;
	}
</style>
